// import React from "react";
import { Component } from "react";
import '../../assets/todomvc.css'
import Header from "../../components/Header";
import Main from "../../components/Main";
import Footer from "../../components/Footer";

class TodoMvc extends Component {
    constructor() {
        super();
        this.state = {
            todoList: [],
            flag: ''
        }
    };

    // 计算属性
    get AllDone() {
        return this.state.todoList.every(item => item.done)
    }
    get showList() {
        if (this.state.flag == 'all') {
            return this.state.todoList
        } else if (this.state.flag == 'active') {
            return this.state.todoList.filter(item => !item.done)
        } else {
            return this.state.todoList.filter(item => item.done)
        }
    }

    // 方法
    add = (value) => {
        this.setState(state => ({
            todoList: [...state.todoList, value]
        }))
    }
    changeDone = (id) => {
        this.setState(state => ({
            todoList: state.todoList.map(item => {
                if (item.id == id) {
                    item.done = !item.done
                }
                return item
            })
        }))
    }
    changeAllDone = (e) => {
        this.setState(state => ({
            todoList: state.todoList.map(item => {
                item.done = e.target.checked
                return item
            })
        }))
    }
    del = (id) => {
        this.setState(state => ({
            todoList: state.todoList.filter(item => item.id != id)
        }))
    };
    changeIsEdit = (id) => {
        console.log(id);
        this.setState(state => ({
            todoList: state.todoList.map(item => {
                if (item.id == id) {
                    item.isEdit = !item.isEdit
                }
                return item
            })
        }))
    };
    edit = (id, value) => {
        console.log(id, value);
        this.setState(state => ({
            todoList: state.todoList.map(item => {
                if (item.id == id) {
                    item.isEdit = !item.isEdit
                    item.title = value
                }
                return item
            })
        }))
    };
    changeFlag=(value)=>{
        this.setState({
            flag: value
        })
    };
    delCompleted=()=>{
        this.setState(state => ({
            todoList: state.todoList.filter(item=>!item.done)
        }))
    }
    componentDidMount(){
        this.setState({
            todoList: JSON.parse(localStorage.getItem('todoList')) || [],
            flag: JSON.parse(localStorage.getItem('flag')) || 'all'
        })
    }
    render() {
        const { todoList, flag } = this.state;
        return (
            <section className="todoapp">
                <Header todoList={todoList} add={this.add}></Header>
                <Main showList={this.showList} changeDone={this.changeDone} del={this.del} AllDone={this.AllDone} changeAllDone={this.changeAllDone} changeIsEdit={this.changeIsEdit} edit={this.edit}></Main>
                <Footer flag={flag} showList={this.showList} changeFlag={this.changeFlag} delCompleted={this.delCompleted}></Footer>
            </section>
        )
    }
    componentDidUpdate(props,state){
        if(state.todoList != this.state.todoList){
            localStorage.setItem('todoList', JSON.stringify(this.state.todoList))
        }
        if(state.flag != this.state.flag){
            localStorage.setItem('flag', JSON.stringify(this.state.flag))
        }
    }
}
export default TodoMvc